<template>
  <div class="title clearfix">
    <div class="logo clearfix">
      <img src="/static/img/u1.png">
      <h2>海军战斗文化研练系统</h2>
      <div class="avatar-wrap">
        <img class="avatar" :src="avatorImgPath">
      </div>
    </div>
  </div>
</template>
<script>
import { mapState } from 'vuex'
export default {
  data() {
    return {}
  },
  computed: {
    ...mapState({
      avatorImgPath: state => state.user.avatorImgPath
    })
  }
}
</script>
<style lang="scss" scoped>
.title {
  height: 60px;
  line-height: 60px;
  padding: 0 20px;
  margin-bottom: 30px;
  background: #e8ebf2;
  box-shadow: 0 4px 8px 0 rgba(7,17,27,.1);
  .logo {
    width: 100%;
    img {
      vertical-align: middle;
      width: 30px;
      margin-right: 10px;
    }
    .avatar-wrap {
      float: right;
      img{
        width: 40px;
        border-radius: 100%;
      }
    }
    h2 {
      display: inline;
      vertical-align: middle;
      font-family: '幼圆 Bold', '幼圆 Regular', '幼圆';
      font-weight: 700;
      font-style: normal;
      font-size: 20px;
    }
  }
}
</style>